<css href="/Public/wangeditor/css/style.css" />
<js href="/Public/wangeditor/index.js" />
<div style="border: 1px solid #ccc;">
    <div id="editor-toolbar" style="border-bottom: 1px solid #ccc;"></div>
    <div id="editor-text-area" style="height: 500px"></div>
</div>
<script>
    const E = window.wangEditor

    // Change language
    const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
    E.i18nChangeLanguage(LANG)

    const editorConfig = {
        MENU_CONF: {}
    }
    editorConfig.MENU_CONF['uploadImage'] = {
        server: '/system/upload/img/dofor/wangeditor',
        // server: '/api/upload/qiniu/type/image',
        timeout: 5 * 1000, // 5s
        fieldName: 'file',
        headers: {
            Accept: 'text/x-json'
        },
        maxFileSize: 3 * 1024 * 1024, // 10M
        base64LimitSize: 5 * 1024, // insert base64 format, if file's size less than 5kb
        onBeforeUpload(file) {
            console.log('onBeforeUpload', file)
            return file // will upload this file
                // return false // prevent upload
        },
        onProgress(progress) {
            console.log('onProgress', progress)
        },
        onSuccess(file, res) {
            console.log('onSuccess', file, res)
        },
        onFailed(file, res) {
            alert(res.message)
            console.log('onFailed', file, res)
        },
        onError(file, err, res) {
            alert(err.message)
            console.error('onError', file, err, res)
        }
    }

    const editor = E.createEditor({
        selector: '#editor-text-area',
        html: '',
        config: editorConfig
    })

    const toolbar = E.createToolbar({
        editor,
        selector: '#editor-toolbar',
        // config: {}
    })
</script>